<template>
	<view class="mainbgc">
		<backtop ref="backtops"></backtop>
		<view class="content">
			<!-- 属性弹框-->
			<u-popup :show="show_shuxing" :round="10" mode="bottom" @close="close" @open="open">
				<view class="nav">
					<view class="form">属性</view>
					<view class="flexleft">
						<view :class="lablecheck==2?'lan':'pu'" @click="changelable(2)">招聘</view>
						<view :class="lablecheck==1?'lan':'pu'" @click="changelable(1)">求职</view>
					</view>
					<view class="footer">
						<view class="bottombtn" @click="surelable">确认</view>
					</view>
				</view>
			</u-popup>
			<!-- 搜索框 -->
			<view class="centers  flexleft flexcenter">
				<view class="all" :class="lablecheck==2?'gongying':'xuqui'" @click="changelable(2)">招聘</view>
				<view class="alls" :class="lablecheck==1?'gongying':' xuqui'" @click="changelable(1)">求职</view>
			</view>
			<view class="flexleft margin_top">
				<view class="ss flexleft">
					<image src="@/static/images/sy_slices/search.png" mode="" class="search"></image>
					<input type="text" placeholder="请输入搜索内容" class="inp" v-model="keywords" confirm-type="search"
						@confirm="init">
				</view>
				<view class="sea" @click="init">搜索</view>
			</view>
			<!-- 轮播图 -->
			<view class="margin_top">
				<u-swiper :list="list1" height="150" keyName="image_text" @change="e => currentNum = e.current" @click="jumprul(list1,currentNum)" circular></u-swiper>
			</view>
			<!--  -->
			<view class="flexbetween header">
				<!-- <view @click="show_shuxing=true">属性筛选
					<image src="@/static/images/xiangqing_slices/gray_jiao.png" mode="" class="gray"></image>
				</view> -->
				<view @click="zpqzshow=true">类型筛选<image src="@/static/images/xiangqing_slices/gray_jiao.png" mode=""
						class="gray"></image>
				</view>
				<view @click="hyshow=true">行业筛选<image src="@/static/images/xiangqing_slices/gray_jiao.png" mode=""
						class="gray"></image>
				</view>
			</view>
			<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
				<view class="placeimage"></view>
			</view>
			<view class="" v-if="list.data.length">
				<view class="" v-if="lable==2">
					<view class="center relative" @click="zhiwie(item.id)" v-for="item in list.data" :key="item.id">
						<view class="yxlable" v-show="item.yx_type==1">优选</view>
						<view class="flexbetween flex_wrap">
							<view class="flexleft">
								<view class="image_ya">
									<image :src="item.user.avatar_text" mode=""></image>
								</view>
								<view class="center_zi ">
									<view class="word_hei">{{item.user.nickname}}</view>
									<view class="hui">{{item.createtime_text}}</view>
								</view>
							</view>
							<view class="flexleft">
								<view class="province_jiangsu">{{item.cityinfo}}</view>
							</view>
						</view>
						<!-- l类型 -->
						<view class="flexleft lx flex_wrap">
							<view class="leixing" v-for="ite in item.flags" :key="ite">{{ite}}</view>
						</view>
						<view class="flexbetween TV">
							<view class="hei">{{item.title}}</view>
							<view class="blue">{{item.xz}}</view>
						</view>
						<view class="hui_zi">{{item.des}}</view>
					</view>
				</view>
				<view class="" v-show="lable==1">
					<view class="center relative" @click="xiangqing(item.id)" v-for="item in list.data" :key="item.id">
						<view class="yxlable" v-show="item.yx_type==1">优选</view>
						<view class="flexleft">
							<view class="image_ya">
								<image :src="item.user.avatar_text" mode=""></image>
							</view>
							<view class="center_zi ">
								<view class="word_hei">{{item.user.nickname}}</view>
								<view class="hui">{{item.createtime_text}}</view>
							</view>
						</view>
						<!-- l类型 -->
						<view class="flexleft lx flex_wrap ">
							<view class="leixing" v-for="ite in item.flags" :key="ite">{{ite}}</view>
						</view>
						<view class="flexbetween flex_wrap TV">
							<view class="hei">{{item.title}}</view>
							<view class="blue">{{item.xz}}</view>
						</view>
						<view class="hui_zi">{{item.des}}</view>
						<!-- 图片 -->
						<view class="flexleft margin_top flex_wrap" v-if="item.images.length">
							<view class="item_image_box flexcenter" v-for="ite in item.images_text" :key="ite">
								<view class="item_image">
									<image :src="ite" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="footertextdaodi">老板！到底没数据了！</view>
			</view>
		</view>
		<!-- 行业选择器 -->
		<hangyepicker :messageInfo="{hyshow:hyshow}" @surehy="surehy"></hangyepicker>
		<!-- 招聘1求职2 -->
		<zhaopinqzpicker :messageInfo="{zpqzshow:zpqzshow,value:lable}" @surezpqz="surezpqz"></zhaopinqzpicker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currentNum:0,
				list1: [],
				lable: 2, //招聘1求职2
				lablecheck: 2,
				show_shuxing: false,
				// 行业选择器开始
				hyshow: false,
				hy: {
					name: "",
					id: "",
				},
				// 行业选择器结束
				// 招聘求职选择器开始
				zpqzshow: false,
				zhaopin: {
					name: "",
					id: "",
					value: "",
				},
				qiuzhi: {
					name: "",
					id: "",
					value: "",
				},
				// 招聘求职选择器结束
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keywords: "",
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "招聘/求职"
			})
			this.init()
			this.getlbt()
		},
		onPageScroll(res) {
			if (res.scrollTop > 700) {
				this.$refs.backtops.isshow = true
			} else {
				this.$refs.backtops.isshow = false
			}
		},
		watch: {
			// lable(newval) {
			// 	if (newval == 2) {
			// 		uni.setNavigationBarTitle({
			// 			title: "我要招人"
			// 		})
			// 	} else {
			// 		uni.setNavigationBarTitle({
			// 			title: "找工作"
			// 		})
			// 	}

			// }
		},
		methods: {
			getlbt() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 16,
					is_more: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.list1 = res.data
					}
				})
			},
			jumprul(item,index) {
				let i = []
				item.forEach(items=>{
					i.push(items.image_text)
				}) //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
				if (item.url == "") {
					return false
				}
				uni.navigateTo({
					url: item.url
				})
			},
			// 获取优选仓库列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/zp/zpList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					type: this.lable == 1 ? 2 : 1,
					zp_item_id: this.lable == 1 ? this.zhaopin.id : this.qiuzhi.id,
					keywords: this.keywords,
					zp_hy_id: this.hy.id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			surehy(e) {
				this.hy = e
				this.init()
			},
			surezpqz(e) {
				if (e.value == 1) {
					this.zhaopin = e
				} else {
					this.qiuzhi = e
				}
				this.init()
			},
			changelable(value) {
				this.lablecheck = value
				this.lable = this.lablecheck
				this.init()
			},
			surelable() {
				this.lable = this.lablecheck
				this.init()
				this.show_shuxing = false
			},
			zhiwie(id) {
				uni.navigateTo({
					url: '/pages/index/zhiwiexiangqing?id=' + id
				})
			},
			xiangqing(id) {
				uni.navigateTo({
					url: '/pages/index/zhaopingrxq?id=' + id
				})
			},
			Confirm() { //点击确认关闭弹窗
				this.show = false,
					this.show_leixing = false;
				this.show_shuxing = false;
			},
			open() {},
			close() {
				this.show = false;
				this.show_shuxing = false;
				this.show_leixing = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.centers {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.all {
		background: #fFF;
		border-radius: 11rpx 0rpx 0rpx 11rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.alls {
		background: #228DFF;
		border-radius: 0rpx 11rpx 11rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffff;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.xuqui {
		background: #fff;
		color: #228DFF;
		border: 2rpx solid #228DFF;
	}

	.gongying {
		background: #228DFF;
		color: #ffff;
		border: 2rpx solid #228DFF;
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.item_image_box {
		width: 25%;
	}

	.item_image {
		width: 144rpx;
		height: 144rpx;
		margin-top: 15rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		padding: 30rpx 24rpx;
	}

	.lx {
		padding: 30rpx 0rpx 20rpx 0rpx;
	}

	.blue {
		font-size: 28rpx;
		font-weight: 500;
		color: #228DFF;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
	}

	.ss {
		width: 560rpx;
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 18rpx 20rpx 18rpx 42rpx;
	}

	.inp {
		background-color: #f3f3f3;
		width: 400rpx;
		padding: 0rpx 0rpx 0rpx 24rpx;
	}

	.sea {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #228DFF;
		padding-left: 20rpx;
	}

	.header {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 27rpx 28rpx 27rpx 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.gray {
		width: 8rpx;
		height: 12rpx;
		background-size: 100% 100%;
		padding-left: 6rpx;
	}

	.center {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx 30rpx;
	}

	.section {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 30rpx 30rpx;
	}

	.center_zi {
		padding: 0rpx 20rpx;
	}

	.hei {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.hui_zi {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		padding-top: 24rpx;
		//超出两行省略号
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ya {
		padding: 34rpx 19rpx 0rpx 30rpx;
	}

	.leixing {
		background: RGBA(233, 244, 255, 1);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 4rpx 25rpx 4rpx 25rpx;
		margin-right: 15rpx;
	}

	.form {
		text-align: center;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 20rpx 62rpx 21rpx 62rpx;
		margin: 30rpx 0rpx 0rpx 30rpx;
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 20rpx 62rpx 21rpx 62rpx;
		margin: 30rpx 0rpx 0rpx 30rpx;
	}

	.footer {
		padding: 50rpx 30rpx;
	}

	.nav {
		padding: 30rpx 30rpx;
	}

	.time {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #626365;
		padding-top: 10rpx;
	}

	.transport {
		height: 270rpx;
		overflow-x: hidden;
	}

	.hui {
		padding-top: 10rpx;
	}

	.TV {
		padding: 30rpx 0rpx 0rpx 0rpx;
	}

	.item_image_box {
		width: 25%;
	}
</style>